<template>
	<view class="bg-white">
		<view class="container">
			<view class="store-info flex-fr">
				<image src="../../../static/user-bg.jpg" mode="scaleToFill" class="store-pic"></image>
				<view class="store-info-30">
					<text class="store-titile">{{storeName}}</text>
					<text class="store-goods-disc">全部商品 {{totalGoods}} 件</text>
				</view>
			</view>
			<!-- 轮播图 -->
			<swiper class="swiper"  autoplay="true" interval="2000" duration="500" circular="true">
				<swiper-item v-for="(item,index) in imageList " :key="index" >
					<!-- <view class="swiper-item uni-bg-red">A</view> -->
					<view class="swiper-item"><image :src="item" mode="scaleToFill" ></image></view>
				</swiper-item>index
			</swiper>
		</view>
		<!-- 中部一级选项卡 -->
		<view class="mid-nav ">
			<view>
				<text class="option-card" :class="currentStep == 0 ? 'choice':''" @tap="Choice(0)">全部</text>
				<text class="option-card" :class="currentStep == 1 ? 'choice':''" @tap="Choice(1)" >热销</text>
				<text class="option-card" :class="currentStep == 2 ? 'choice':''" @tap="Choice(2)">上新</text>
			</view>
			<view class="addGoods flex-fr" @tap="addGoods()">
				<text >新增商品</text>
				<image src="../../../static/icon-add.png" mode="scaleToFill" class="addgoods-img mar"></image>
			</view>
		</view>
		<hr class="dividing-line">
		<!-- 二级选项卡 -->
		<view class="mid-nav-second flex-ca">
			<view class="option-card" :class="currentStep2 == 0 ? 'choice':''" @tap="Choice_second(0)" >
				<text >综合</text>
			</view>
			<view class="option-card" :class="currentStep2 == 1 ? 'choice':''" @tap="Choice_second(1)">
				<text  >销量</text>
			</view>
			<view class="option-card" :class="currentStep2 == 2 ? 'choice':''" @tap="Choice_second(2)">
				<text >上新</text>
			</view>
			<view class="option-card" :class="currentStep2 == 3 ? 'choice':''" @tap="Choice_second(3)" >
				<text  >价格</text>
				<image :src="adescFlag?'../../../static/icon-asc.png':'../../../static/icon-desc.png'" mode="scaleToFill" class="a-desc"></image>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="list-warp">
			<view class="m-view" v-for="(item,index) in listGoods" :key="index"  @longpress="showMask(index)" >
				<view :class="falg_mask == index? 'mask':''" @tap="navTo('editGoods'+index)"></view>
				<image class="g-img" :src="item.goodImg" mode="scaleToFill" ></image>
				<view class="m-title more-hidden2">
					{{item.goodTitle}}
				</view>
				<view class="j-view">
					￥{{item.goodPrice}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"

	export default {
	    components: {uniNavBar},
		onNavigationBarSearchInputConfirmed(option) {   // 导航栏提交事件监听
			console.log(option);
		} , 
		data(){
			return {
				falg_mask: -1,
				adescFlag : true,
				currentStep : 0,
				currentStep2 : 0,
				storeName : '店铺名称XX',
				totalGoods : 78 ,
				imageList : [ 
					'../../../static/blue.png',
					'../../../static/pink.png',
					'../../../static/purple.png'
				],
				listGoods : [
					{goodImg:'../../../static/blue.png',goodTitle:"XXXXXXXXXXX",goodPrice:120},
					{goodImg:'../../../static/pink.png',goodTitle:"XXXXXXXXXXX",goodPrice:245},
					{goodImg:'../../../static/purple.png',goodTitle:"XXXXXXXXXXX",goodPrice:250},
					{goodImg:'../../../static/purple.png',goodTitle:"XXXXXXXXXXX",goodPrice:2000},
					{goodImg:'../../../static/purple.png',goodTitle:"XXXXXXXXXXX",goodPrice:2000}
				]
				
			};
			
		},
		methods: {
			Choice(value){
				this.currentStep = value;
			},
			addGoods(){
				uni.showToast({
					title : "点击了增加商品按钮"
				})
			},
			Choice_second(value){
				this.currentStep2 = value;
				if(value==3){
					this.adescFlag = !this.adescFlag;
				}
			},
			showMask(index){
				this.falg_mask = index;
				// this.timer = setInterval(()=>{
				// 	if(this.falg_mask != -1){
				// 		this.falg_mask = -1;
				// 	}
				// },5000)
			},
			navTo(url){
				
			}
		}
	}
	

	
</script>


<style>



.container {
	margin: 0upx 20upx;
}	

.store-info {
	
	height: 140upx;
}	

.store-pic {
	margin : 30upx 0upx;
	width : 80upx;
	height : 80upx;
	border-radius : 80upx;
	
}

.store-info-30 {
	display: flex;
	flex-direction: column;
	margin : 28upx  0upx 0upx 28upx;
}

.store-titile {
	font-size : 30upx;
	color : rgba(124,124,124,1);
}

.store-goods-disc {
	font-size : 20upx;
	color : rgba(124,124,124,1);
}

.swiper-item {
	height: 346upx ;
}

.swiper {
	height: 346upx;
}

.mid-nav {
	display: flex;
	justify-content: space-between;
	height: 86upx;
}

.option-card {
	padding: 0upx 32upx;
	margin: auto 30upx;
	line-height: 86upx;
	color:rgba(124,124,124,1);
}

.choice {
	color:rgba(60,60,60,1);
	font-weight: bold ;
}

.addGoods {
	line-height: 86upx;
	margin-right: 20upx;
}

.addgoods-img {
	margin: auto;
	width: 32upx;
	height: 32upx;
}

/* 分割线样式 */
.dividing-line {
	margin: auto;
	width: 96%;
	border: 0upx;/* 去掉其中一条边线 */
	height: 2upx;/* 粗细 */
	background-color : #f8f5f5 ;
	
}

.mid-nav-second {
	height: 80upx;
	margin: auto;
}

.a-desc {
	height: 20upx;
	width: 12upx;
}

/* 实现 溢出放到新行 */
.list-warp {
/* 	position: relative; */
	width: 100%;
	padding: 20upx;
	display: flex;
	flex-wrap: wrap;
	background-color: #FFFFFF;
	justify-content: flex-start;
	z-index: 2;
}

.m-view{
	position: relative;
	width: 344upx;
	height: 408upx;
	border-radius: 8upx;
	margin-bottom: 20upx;
	background: rgba(255,255,255,1);
	border: 1upx solid rgba(216,216,216,1);
	z-index: 2;
}

.g-img {
	width: 342upx;
	height: 262upx;
	border-radius: 8upx 8upx 0upx 0upx;
	z-index: 0;
}

.m-title {
	padding: 10upx 10upx 0 10upx;
	font-size:24upx;
	font-weight: 500;
	color: rgba(78,78,78,1);
	line-height: 32upx;
	z-index: 1;
}

.m-view:nth-child(odd){
	margin-right: 20upx;
	z-index: 1;
}

.j-view{
	padding: 10upx;
	font-size: 26upx;
	font-weight: 500;
	color: rgba(244,72,86,1);
	line-height: 36upx;
	z-index: 2;
}

.mask {  
  position: absolute;
  z-index: 1;   /* 堆叠顺序 */
  width: 344upx;
  height: 408upx;
  color: #000000;
  background: rgba(0,0,0,0.4);
  background-image: url('../../../static/icon-edit.png');
  background-size: 64upx;
  background-repeat: no-repeat;  /* 不重复 */
  background-position: center; /* 居中 */
  opacity: 0.8; /* 透明度 */
}
</style>
